<!--
 * @Description: 
 * @Author: charles
 * @Date: 2021-05-05 22:02:56
 * @LastEditors: Please set LastEditors
 * @LastEditTime: 2022-01-10 20:04:21
-->
<template>
  <div ref="bottom3_container" style="height: 95%"></div>
</template>

<script>
import { Line } from "@antv/g2plot";
export default {
  data() {
    return {
      dataArr: [
        {
          date: "01-10",
          category: "1号设备",
          value: 18,
        },
        {
          date: "01-11",
          category: "1号设备",
          value: 12,
        },
        {
          date: "01-12",
          category: "1号设备",
          value:5,
        },
        {
          date: "01-13",
          category: "1号设备",
          value: 8,
        },
        {
          date: "01-10",
          category: "2号设备",
          value: 30,
        },
        {
          date: "01-11",
          category: "2号设备",
          value: 16,
        },
        {
          date: "01-12",
          category: "2号设备",
          value: 10,
        },
        {
          date: "01-13",
          category: "2号设备",
          value: 6,
        },
        {
          date: "01-10",
          category: "3号设备",
          value: 26,
        },{
          date: "01-11",
          category: "3号设备",
          value: 15,
        },{
          date: "01-12",
          category: "3号设备",
          value: 6,
        },
        {
          date: "01-13",
          category: "3号设备",
          value: 1,
        },
      ],
    };
  },
  mounted() {
    this.initData();
  },
  methods: {
    initData() {
      const line = new Line(this.$refs.bottom3_container, {
        data: this.dataArr,
        xField: "date",
        yField: "value",
        seriesField: "category",
        xAxis: {
          type: "time",
        },
        yAxis: {
          
        },
      });

      line.render();
    },
  },
};
</script>